<template>
  <!-- 可滚动内容区域 -->
  <div class="scroll-wrapper" @scroll="rememberPos" ref="articleList">
    <van-pull-refresh
      v-model="downLoading"
      @refresh="onRefresh"
      :success-text="refreshSuccessText"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 新闻列表 -->
        <van-cell
          :to="`/article/${item.art_id.toString()}`"
          v-for="item in list"
          :key="item.art_id.toString()"
        >
          <div class="article_item">
            <h3 class="van-ellipsis">
              {{ item.title }}
            </h3>
            <div class="img_box" v-if="item.cover.images.length">
              <van-image
                v-for="(img, index) in item.cover.images"
                :key="index"
                :class="item.cover.type === 1 ? 'w100' : 'w33'"
                fit="cover"
                :src="img"
                lazy-load
              >
                <!-- 图片加载前显示loading效果 -->
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <!-- 如果图片加载失败，显示失败提示 -->
                <template v-slot:error>加载失败</template>
              </van-image>
            </div>
            <div class="info_box">
              <span
                v-html="
                  item.aut_name === '*****' ? '满眼星河不及你' : item.aut_name
                "
              ></span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relTime }}</span>
              <span
                v-if="$store.state.user"
                class="close"
                @click.stop="openMore(item.art_id.toString())"
                ><van-icon name="cross"></van-icon
              ></span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <MoreAction
      v-model="showMore"
      @on-dislike="removeArticle"
      @on-report="removeArticle"
      :activeArticelId="activeArticelId"
    />
  </div>
</template>

<script>
import { getArticlesById } from '../../api/article'
import MoreAction from './components/more-action'
export default {
  props: {
    // 栏目ID
    channelId: {
      type: Number,
      default: 0
    }
  },
  components: {
    MoreAction
  },
  data () {
    return {
      // 文章列表数据
      list: [],
      // 加载状态
      loading: false,
      // 控制是否加载完成
      finished: false,
      // 是否是刷新状态中
      downLoading: false,
      // 刷新完成的提示文案
      refreshSuccessText: '',
      // 获取数据时开始的时间戳
      timestamp: +new Date(),
      // 列表滚动的位置
      scrollTop: 0,
      // 控制更多操作弹出层是否显示
      showMore: false,
      // 当前点击的文章ID
      activeArticelId: ''
    }
  },
  // keeplive下组件激活时调用
  activated () {
    this.scrollToPos()
  },
  methods: {
    // 删除文章
    removeArticle () {
      // 获取要删除文章id的索引
      const index = this.list.findIndex((article) => article.art_id.toString() === this.activeArticelId)
      this.list.splice(index, 1)
    },
    // 操作某个文章
    openMore (areicleId) {
      console.log(areicleId)
      this.showMore = true
      // 动态修改当前点击文章ID
      this.activeArticelId = areicleId
    },
    // 记录列表滚动位置
    rememberPos (e) {
      this.scrollTop = e.target.scrollTop
    },
    // 根据记录滚动到上一次浏览的位置
    scrollToPos () {
      this.$nextTick(() => {
        if (this.scrollTop > 0) {
          this.$refs.articleList.scrollTop = this.scrollTop
        }
      })
    },
    // 上划加载更多
    async onLoad () {
      // const res = await this.$sleep()
      // console.log(res)
      const { status, data } = await getArticlesById(this.channelId, this.timestamp)
      console.log(status, data)
      if (status === 200) {
        this.list.push(...data.results)
        // 加载状态结束
        this.loading = false
        // 获取数据后结束刷新
        this.downLoading = false
        this.refreshSuccessText = '刷新成功'
        // 数据全部加载是否完成
        if (data.pre_timestamp) {
          // 没完成就把获取的前一个时间戳赋值给timestamp用做下一次获取更多数据的开始时间戳
          this.timestamp = data.pre_timestamp
        } else {
          // 完成了就显示提示文本
          this.finished = true
        }
      }
    },
    // 下拉刷新
    onRefresh () {
      // 清空列表数据
      if (this.downLoading) {
        this.list = []
      }
      // 重新加载数据
      // 重置列表加载状态
      this.finished = false
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      // 设置最新的时间戳
      this.timestamp = +new Date()
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
// 新闻列表模块样式
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      width: 100%;
      height: 180px;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close {
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
